<template>
     <div class="app">
      <div class="d1">
        <van-icon @click="this.$router.go(-1)" class="d2" name="arrow-left" size="20"/>
        <div class="d3">关联订单</div>
      </div>
      <div class="d4">
        <img class="i1" src="@/assets/u1401.png" >
        <div class="d5">北京华睿整形医院</div>
        <img class="i2" src="@/assets/u1398.png" >
        <img class="i3" src="@/assets/微信图片_20220830150220.png" >
        <div class="d6">【水光针】水光针/皮肤修正/祛痘嫩肤/皮肤清洁</div>
        <div class="d7">基础套餐</div>
        <div class="d8">*1</div>
        <div class="d9">预约金<span class="s1">￥299</span>到店支付￥699</div>
      </div>
      <div class="d4">
        <img class="i1" src="@/assets/u1401.png" >
        <div class="d5">北京华睿整形医院</div>
        <img class="i2" src="@/assets/u1398.png" >
        <img class="i3" src="@/assets/微信图片_20220830150220.png" >
        <div class="d6">【水光针】水光针/皮肤修正/祛痘嫩肤/皮肤清洁</div>
        <div class="d7">基础套餐</div>
        <div class="d8">*1</div>
        <div class="d9">预约金<span class="s1">￥299</span>到店支付￥699</div>
      </div>
      <div class="d4">
        <img class="i1" src="@/assets/u1401.png" >
        <div class="d5">北京华睿整形医院</div>
        <img class="i2" src="@/assets/u1398.png" >
        <img class="i3" src="@/assets/微信图片_20220830150220.png" >
        <div class="d6">【水光针】水光针/皮肤修正/祛痘嫩肤/皮肤清洁</div>
        <div class="d7">基础套餐</div>
        <div class="d8">*1</div>
        <div class="d9">预约金<span class="s1">￥299</span>到店支付￥699</div>
      </div>
      <div class="d10">我是有底线的</div>
  </div>
</template>
<script setup lang="ts">

</script>
<style scoped>
  .app{background:#f2f2f2;width: 100%;height: 844px;}
.d1{background: #ffffff;height: 50px;border-bottom:1px solid #f2f2f2;}
.d2{width: 15px;height: 15px;margin-top: 4%;position: absolute;margin-left: 3%;}
.d3{text-align: center;width: 80px;margin-left: 40%;margin-top:3%;font-size: 16px;position:absolute;}
.d4{width: 330px;height: 150px;background:#ffffff ;border-radius: 10px;margin-left: 8%;margin-top: 3%;}
.i1{margin-top: 1%;position: absolute;margin-left: 5%;margin-top: 5%;}
.d5{position: absolute;margin-left: 13%;margin-top: 4%;}
.i2{position: absolute;margin-left: 5%;margin-top: 14%;}
.i3{position: absolute;margin-left: 5%;margin-top: 18%;width: 80px;height: 80px;}
.d6{position: absolute;margin-left: 35%;margin-top: 18%;font-size: 12px;padding-right: 5%;}
.d7{position: absolute;margin-left: 35%;margin-top: 29%;font-size: 12px;color: #999999;}
.d8{position: absolute;margin-left: 90%;margin-top: 29%;font-size: 12px;color: #999999;}
.d9{position: absolute;margin-left: 35%;margin-top: 35%;font-size: 12px;color: #999999;}
.s1{color: red;}
.d10{font-size: 12px;color: #cccccc;margin-left: 40%;margin-top: 5%;}
</style>
  